<!--
*
* Copyright 2015 HISP Tanzania
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
* @since 2015
* @author Joseph Chingalo profschingalo@gmail.com>
*
*
-->
<ion-header>

  <ion-navbar [color]="(colorSettings$ |async).colorAttributes.main">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <span [translate]="'Dashboard'"></span>
    </ion-title>
  </ion-navbar>

</ion-header>
<ion-content>

  <!--dashboard loading block-->
  <div class="dashboard-loading-block" *ngIf="loading$ | async">
    <loading [loadingSize]="'large'" [loadingMessage]="'Discovering dashboards' | translate"></loading>
  </div>
  <!--end dashboard loading block-->

  <!--header section-->
  <div class="selected-dashboard-block" (tap)="openDashboardListFilter()" *ngIf="!(loading$ | async)">
    <div class="dashboard-name">
      {{(currentDashboard$ | async)?.name}}
    </div>
    <img [src]="'assets/icon/menu.png'" alt="">
  </div>
  <!--end of header section-->

  <!--visualization section-->
  <div class="visualization-card-list" *ngIf="!(loading$ | async)">
    <div *ngFor="let visualizationId of currentDashboardVisualizations$ | async; trackBy: visualizationId" class="visualization-card-container">
      <app-visualization-card [id]="visualizationId"></app-visualization-card>
    </div>
  </div>
  <!--end of visualization section-->
</ion-content>
